<!DOCTYPE html>
<html>
<head>
    <title>JsSIP + WebRTC + freeSWITCH</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" content="foruok"/>
    <meta name="description" content="JsSIP based example web application."/>
    <script src="jssip-3.5.7.min.js" type="text/javascript"></script>
    <style type="text/css">
    </style>
</head>
<body>

<div id="login-page" style="width: 424px; height: 260px; background-color: #f2f4f4; border: 1px solid grey; padding-top: 4px">
    <table border="0" frame="void" width="418px">
        <tr>
            <td class="td_label" width="160px" align="right"><label for="sip_uri">SIP URI:</label></td>
            <td width="258px"><input style="width:250px" id="sip_uri" type="text"
                                     placeholder="SIP URI (i.e: sip:alice@example.com)"/></td>
        </tr>
        <tr>
            <td class="td_label" align="right"><label for="sip_password">SIP Password:</label></td>
            <td><input style="width:250px" id="sip_password" type="password" placeholder="SIP password"/></td>
        </tr>
        <tr>
            <td class="td_label" align="right"><label for="ws_uri">WSS URI:</label></td>
            <td><input style="width:250px" id="ws_uri" class="last unset" type="text"
                       placeholder="WSS URI (i.e: wss://example.com)"/></td>
        </tr>
        <tr>
            <td class="td_label" align="right"><label class="input_label" for="sip_phone_number">SIP Phone Info:</label>
            </td>
            <td><input style="width:250px" id="sip_phone_number" type="text" placeholder="sip:3000@192.168.40.96:5060">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button onclick="testStart()"> Initialize</button>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button onclick="testCall()"> Call</button>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button onclick="captureLocalMedia()"> Capture Local Media</button>
            </td>
        </tr>
    </table>
</div>

<div style="width: 424px; height: 324px;background-color: #333333; border: 2px solid blue; padding:0px; margin-top: 4px;">
    <video id="videoView" width="420px" height="320px" autoplay></video>
</div>

</body>
<script type="text/javascript">
    var outgoingSession = null;
    var incomingSession = null;
    var currentSession = null;
    var videoView = document.getElementById('videoView');

    var constraints = {
        audio: true,
        video: true,
        mandatory: {
            maxWidth: 640,
            maxHeight: 360
        }
    };
    URL = window.URL || window.webkitURL;

    var localStream = null;
    var userAgent = null;

    function gotLocalMedia(stream) {
        console.info('Received local media stream');
        localStream = stream;
        videoView.src = URL.createObjectURL(stream);
    }

    function captureLocalMedia() {
        console.info('Requesting local video & audio');
        navigator.webkitGetUserMedia(constraints, gotLocalMedia, function (e) {
            alert('getUserMedia() error: ' + e.name);
        });
    }

    function testStart() {

        var sip_uri_ = document.getElementById("sip_uri").value.toString();
        var sip_password_ = document.getElementById("sip_password").value.toString();
        var ws_uri_ = document.getElementById("ws_uri").value.toString();

        console.info("get input info: sip_uri = ", sip_uri_, " sip_password = ", sip_password_, " ws_uri = ", ws_uri_);

        var socket = new JsSIP.WebSocketInterface(ws_uri_);
        var configuration = {
            sockets: [socket],
            outbound_proxy_set: ws_uri_,
            uri: sip_uri_,
            password: sip_password_,
            register: true,
            session_timers: false
        };

        userAgent = new JsSIP.UA(configuration);

        userAgent.on('registered', function (data) {
            console.info("registered: ", data.response.status_code, ",", data.response.reason_phrase);
        });

        userAgent.on('registrationFailed', function (data) {
            console.log("registrationFailed, ", data);
            //console.warn("registrationFailed, ", data.response.status_code, ",", data.response.reason_phrase, " cause - ", data.cause);
        });

        userAgent.on('registrationExpiring', function () {
            console.warn("registrationExpiring");
        });

        userAgent.on('newRTCSession', function (data) {
            console.info('onNewRTCSession: ', data);
            if (data.originator == 'remote') { //incoming call
                console.info("incomingSession, answer the call");
                incomingSession = data.session;
                data.session.answer({
                    'mediaConstraints': {
                        'audio': true,
                        'video': true,
                        mandatory: {maxWidth: 640, maxHeight: 360}
                    }, 'mediaStream': localStream
                });
            } else {
                console.info("outgoingSession");
                outgoingSession = data.session;
                outgoingSession.on('connecting', function (data) {
                    console.info('onConnecting - ', data.request);
                    currentSession = outgoingSession;
                    outgoingSession = null;
                });
            }
            data.session.on('accepted', function (data) {
                console.info('onAccepted - ', data);
                if (data.originator == 'remote' && currentSession == null) {
                    currentSession = incomingSession;
                    incomingSession = null;
                    console.info("setCurrentSession - ", currentSession);
                }
            });
            data.session.on('confirmed', function (data) {
                console.info('onConfirmed - ', data);
                if (data.originator == 'remote' && currentSession == null) {
                    currentSession = incomingSession;
                    incomingSession = null;
                    console.info("setCurrentSession - ", currentSession);
                }
            });
            data.session.on('sdp', function (data) {
                console.info('onSDP, type - ', data.type, ' sdp - ', data.sdp);
                //data.sdp = data.sdp.replace('UDP/TLS/RTP/SAVPF', 'RTP/SAVPF');
                //console.info('onSDP, changed sdp - ', data.sdp);
            });
            data.session.on('progress', function (data) {
                console.info('onProgress - ', data.originator);
                if (data.originator == 'remote') {
                    console.info('onProgress, response - ', data.response);
                }
            });
            data.session.on('peerconnection', function (data) {
                console.info('onPeerconnection - ', data.peerconnection);
                data.peerconnection.onaddstream = function (ev) {
                    console.info('onaddstream from remote - ', ev);
                    videoView.src = URL.createObjectURL(ev.stream);
                };
            });
        });

        userAgent.on('newMessage', function (data) {
            if (data.originator == 'local') {
                console.info('onNewMessage , OutgoingRequest - ', data.request);
            } else {
                console.info('onNewMessage , IncomingRequest - ', data.request);
            }
        });

        console.info("call register");
        userAgent.start();
    }

    // Register callbacks to desired call events
    var eventHandlers = {
        'progress': function (e) {
            console.log('call is in progress');
        },
        'failed': function (e) {
            console.log('call failed: ', e);
        },
        'ended': function (e) {
            console.log('call ended : ', e);
        },
        'confirmed': function (e) {
            console.log('call confirmed');
        }
    };

    function testCall() {
        var sip_phone_number_ = document.getElementById("sip_phone_number").value.toString();

        var options = {
            'eventHandlers': eventHandlers,
            'mediaConstraints': {
                'audio': true, 'video': true,
                mandatory: {maxWidth: 640, maxHeight: 360}
            },
            'mediaStream': localStream
        };

        //outgoingSession = userAgent.call('sip:3000@192.168.40.96:5060', options);
        outgoingSession = userAgent.call(sip_phone_number_, options);
    }
</script>
</html>